;(function() {
    
    window.__fontSet__ = cmp.life('#font-set', {
        $i18n: [
            {
                i18nPath: 'http://my.m3.cmp/v1.0.0/i18n/',
                moduleName: 'my'
            }
        ],
        $onloaded: function() {
            var node = $cmp('.drug-dot');
            this.initEvent();
            this.curIndex = this.sizeToIndexMap[ parseInt(this.getStorge()) ];
            this.translateToIndex(node, this.curIndex, 0)
            node.removeClass('display-none');
        },
        methods: {
            indexToSizeMap: {
                '0': 10,
                '1': 12,
                '2': 14,
                '3': 16
            },

            sizeToIndexMap: {
                '10': 0,
                '12': 1,
                '14': 2,
                '16': 3
            },

            getStorge: function() {
                return window.localStorage[this.getKey()] || '12';
            },

            saveStorge: function(value) {
                var _this = this,
                    key = this.getKey();
                // cmp.sdk.setFontSize(value, function() {
                //     window.localStorage[ key ] = value;
                // }, function() {
                //     cmp.notification.toast('设置字体大小失败', 'center', 2000);
                // })
                window.localStorage[ key ] = value;
            },

            getKey: function() {
                return window.localStorage[ 'userId_' + window.localStorage[ 'editModel' ] + '://' + window.localStorage[ 'editAddress' ] + ':' + window.localStorage[ 'editPort' ] ];
            },

            initEvent: function() {
                var node = $cmp('.drug-dot'),
                    timer,
                    _this = this,
                    maxWidth = $cmp('.font-set-scroll').width();
                this.preWidth = Math.floor(maxWidth / 3) - 2;
                
                //拖拽
                var curX = 0, 
                    disX = 0,
                    index = 0,
                    startT = 0;
                node.on('touchstart', function(e) {
                    disX = _this.curIndex * _this.preWidth;
                    curX = e.touches[ 0 ].pageX;
                }).on('touchmove', function(e) {
                    var moveX = e.touches[ 0 ].pageX - curX + disX;
                    index = _this.getIndex(moveX);
                    _this.translateX(node, moveX, 0)
                }).on('touchend', function() {
                    _this.translateToIndex(node, index, 350);
                    _this.saveConfig(index);
                });

                //点击滑动到指定位置
                $cmp('.font-set-scroll').on('touchstart', function(e) {
                    startT = new Date().getTime();
                    timer = setTimeout(function() {
                        var curX = e.touches[ 0 ].pageX;
                        index = _this.getIndex(curX);
                        _this.translateToIndex(node, index, 350);
                        _this.saveConfig(index);
                    }, 350);
                }).on('touchend', function() {
                    new Date().getTime() - startT > 350 && clearTimeout(timer);
                })
            },

            translateToIndex: function(node, index, time) {
                var disX = this.preWidth * index;
                this.translateX(node, disX, time);
            },

            translateX: function(node, x, time) {
                node.css({
                    '-webkit-transform': 'translate3d(' + x + 'px, 0, 0)',
                    'transition-duration': time + 'ms'
                });
            },

            getIndex: function(moveX) {
                if (moveX < this.preWidth * 0.5) {
                    return 0;
                } else if (moveX >= this.preWidth * 0.5 && moveX <= this.preWidth * 1.5) {
                    return 1;
                } else if (moveX > this.preWidth * 1.5 && moveX <= this.preWidth * 2.5) {
                    return 2;
                } else if (moveX > this.preWidth * 2.5) {
                    return 3;
                }
            },

            saveConfig: function(index) {
                this.curIndex = index;
                var size = this.indexToSizeMap[ index + '' ];
                this.saveStorge(size);
                $cmp('body').removeClass('cmp-font-type-10 cmp-font-type-12 cmp-font-type-14 cmp-font-type-16').addClass('cmp-font-type-' + size);
            }
        }
    });
})();